import React, { Component } from 'react';
import { observer } from 'mobx-react';
import SettingLayout from '@/component/setting/Layout';
import SettingStyle from '@/page/setting/setting.scss';
import { Input, message, Spin } from 'antd';
import UserStore from '@/store/User';
import format from '@/tool/format';
import ApiHelper from '@/store/ApiHelper';
import { update_psw } from "@/constants/ApiTypes";
import MModal from '@/component/common/MModal';

@observer class SettingRevisePwdNormal extends Component {
    constructor(props) {
        super(props);
    }
    defaultState = {
        old_psw: '',
        psw1: '',
        psw2: '',
        spinning: false
    };
    state = this.defaultState;
    inputOnChange = e => {
        this.setState({ [e.target.name]: e.target.value });
    };
    async pwdSubmit() {
        const { old_psw, psw1, psw2 } = this.state;
        if (old_psw == '') {
            this.input_old_psw.focus();
            return message.warn('请填写旧密码！', 1.5);
        }
        if (psw1 == old_psw) {
            this.input_psw1.refs.input.select();
            return message.warn('新密码不能与旧密码相同！', 1.5);
        }
        if (psw1 == '') {
            this.input_psw1.focus();
            return message.warn('请填写新密码！', 1.5);
        }
        if (psw2 == '') {
            this.input_psw2.focus();
            return message.warn('请填写重复密码！', 1.5);
        }
        if (psw1.length < 6 || psw1.length > 16) {
            this.input_psw1.refs.input.select();
            return  message.warn('新密码必须为6到16位的数字或字母组合！', 1.5);
        }
        if (psw1 !== psw2) {
            this.input_psw2.refs.input.select();
            return message.warn('两次密码填写不一致！', 1.5);
        }
        this.setState({ spinning: true });

        const data = {
            old_psw,
            psw1,
            psw2
        };

        const result = await ApiHelper.requestPost(update_psw, data);
        this.setState({ spinning: false });
        if (result.status) {
            MModal.success({ title: '操作成功', content: '密码修改成功' });
            this.setState(this.defaultState);
        } else {
            MModal.success({ title: '操作失败', content: result.info });
        }
    }
    render() {
        const { old_psw, psw1, psw2 } = this.state;
        const { inputOnChange, pwdSubmit } = this;
        return (
            <SettingLayout>
                <div className={SettingStyle['security-wrap']}>
                    <table border="0" className={SettingStyle['login-info']}>
                        <thead />
                        <tbody>
                            <tr>
                                <td className={SettingStyle['login-account']}>登录账号:</td>
                                <td className={SettingStyle['login-account']}>{UserStore.info.account_name}</td>
                            </tr>
                            <tr>
                                <td className={SettingStyle['login-account']}>注册时间:</td>
                                <td className={SettingStyle['login-account']}>{format.timeString(UserStore.info.reg_time)}</td>
                            </tr>
                        </tbody>
                    </table>
                    <hr className={SettingStyle['security-line']} />
                    <Spin tip="loading" spinning={this.state.spinning} delay={150}>
                        <table border="0" className={SettingStyle['modify-pwd']}>
                            <thead />
                            <tbody>
                                <tr>
                                    <td>请输入旧密码:</td>
                                    <td width="200px"><Input name="old_psw" value={old_psw} style={{ width: 180 }} ref={input => this.input_old_psw = input} type="password" onChange={inputOnChange} placeholder="请输入旧密码"/></td>
                                </tr>
                                <tr>
                                    <td>请输入新密码:</td>
                                    <td width="200px"><Input name="psw1" value={psw1} style={{ width: 180 }} ref={input => this.input_psw1 = input} type="password" onChange={inputOnChange} placeholder="请输入新密码"/></td>
                                </tr>
                                <tr>
                                    <td>请再次输入新密码:</td>
                                    <td width="200px"><Input name="psw2" value={psw2} style={{ width: 180 }} ref={input => this.input_psw2 = input} type="password" onChange={inputOnChange} placeholder="请再次输入新密码"/></td>
                                </tr>
                                <tr>
                                    <td><a className={SettingStyle['account-more-btn']} onClick={pwdSubmit}>提交</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </Spin>
                </div>
            </SettingLayout>
        );
    }
}

export default SettingRevisePwdNormal;